import { PureComponent } from "react"
import { Tabs } from "antd-mobile"
interface Props {
	setFormData: Function,
	field: string[],
	list: any[],
	formData: object
}
interface State {

}
export default class Mtabs extends PureComponent<Props, State> {
	public state: State = {

	}
	onChange = (item, index) => {
		let { setFormData, field } = this.props;
		setFormData({
			[field[0]]: item.code
		})
	}

	render() {
		let { list, formData, field } = this.props;
		let activeIndex = 0;
		let tabs = list.map((item, key) => {
			if (item.code === formData[field[0]]) {
				activeIndex = key;
			}
			return {
				...item,
				title: item.name
			}
		})
		return (
			<div className="mi-search-tabs" style={{ minHeight: "43.5px" }}>
				<Tabs
					tabs={tabs}
					animated={true}
					useOnPan={false}
					onTabClick={this.onChange}
					renderTabBar={
						props =>
							<Tabs.DefaultTabBar {...props} activeTab={activeIndex} />
					} />
			</div>
		)
	}
}